<template>
    <div>
        <t-header></t-header>
        <el-alert
        title="当前网站图片资源过多服务器采用的是1Mbps，请耐心等待，如遇图片一直在加载的情况，刷新即可"
        type="info"
        center
        show-icon>
        </el-alert>
        <div class="w">
            <div class="album-list">
                <div @click="showAlbumInfo(item._id)" class="list-item" :key="index" v-for="(item, index) in albums">
                    <img v-lazy="`http://47.105.157.158:3000/images/cat/${item.cat}/${item.path[0]}`">
                    <img v-lazy="`http://47.105.157.158:3000/images/cat/${item.cat}/${item.path[1]}`">
                    <img v-lazy="`http://47.105.157.158:3000/images/cat/${item.cat}/${item.path[4]}`">
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
import Header from '../components/global/Header';
import { ref, onMounted } from '@vue/composition-api';
import axios from 'axios';
export default {
    components: {
        't-header': Header
    },
    setup(props, context) {
        axios.defaults.baseURL = 'http://47.105.157.158:3000';

        onMounted(() => {
            getAlbums();
        })

        //　专辑列表
        const albums = ref('');
        // 获取专辑列表
        const getAlbums = async function () {
            let { data: res } = await axios.get('/get/albumall/name');
            if (res.status == 200) {
                albums.value = res.albums;
            } else {
                context.parent.$message.error('获取专辑列表失败，请重新刷新后重新尝试获取');
            }
        }


        const showAlbumInfo = function (id) {
            context.parent.$router.push(`/album/${id}`);
        }

        const methods = { showAlbumInfo }

        return {
            ...methods,
            albums
        }
    }
}
</script>

<style lang="less" scoped>
.album-list {
    columns: auto 2;
    column-gap: 12px;
    margin-top: 50px;
    .list-item {
        height: 300px;
        margin-bottom: 20px;
        break-inside: avoid;
        overflow: hidden;
        padding: 10px;
        border-radius: 6px;
        background-color: #fff;
        box-shadow: 10px 0 10px #ccc;
        cursor: pointer;
        img {
            float: left;
            width: 40%;
            height: 50%;
            border-radius: 6px;
        }
        img:nth-child(1) {
            width: 58%;
            height: 100%;
            margin-right: 2%;
        }
        img:nth-child(2) {
            height: 48%;
            margin-bottom: 2%;
        }
    }
}
</style>